<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<nav class="navbar navbar-expand-lg bg-body-secondary" data-bs-theme="dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Learn</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">

                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                       aria-expanded="false">
                        选择年级
                    </a>
                    <ul class="dropdown-menu" id="class-dropdown-menu">
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>
<script>
    $(document).ready(function () {
        initGradeDropdownMenu();
    });

    const initGradeDropdownMenu = () => {
        $("#class-dropdown-menu").html("");
        let gradeDict = JSON.parse(JSON.stringify(app.gradeInfoData));
        for (let key in gradeDict) {
            const name = gradeDict[key].name;
            const code = gradeDict[key].code;
            if (name.length > 0) {
                $("#class-dropdown-menu").append('<li><a class="dropdown-item" href="#" onclick="app.selectGrade(' + code + ')">' + name + '</a></li>');
            } else {
                $("#class-dropdown-menu").append('<li><hr class="dropdown-divider"></li>');
            }
        }
    }

</script>
</body>
</html>